//Grid布局
<template>
  <div class="grid-view" v-if="!this.CommonUtils.isEmpty(datas)">
    <div class="item-grid-view" v-for="(item,index) in datas" :key="index">
      <img :src="item" @load="imgLoaded" />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      count: 0,
      length: 0
    };
  },
  created() {},
  methods: {
    imgLoaded() {
      //图片加载完成后发射事件通知scroll刷新
      if (++this.count >= this.length) {
        this.$bus.emit('imgHasLoadCom')
      }
    }
  },
  computed: {},
  components: {},
  props: {
    datas: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  watch: {
    datas() {
      this.length = this.CommonUtils.isEmpty(this.datas) ? 0 : this.datas.length;
    }
  }
};
</script>
<style lang="scss" scoped>
.grid-view {
  display: flex;
  .item-grid-view {
    width: 25%;
    display: flex;
    justify-content: center;
    img {
      width: 80px;
      height: 80px;
      object-fit:fill;
    }
  }
}
</style>